<template>
  <div ref="right" class="left"></div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, onActivated } from 'vue'

//  按需引入 echarts
import * as echarts from 'echarts'

const right = ref()

let chartObj = reactive<{
  chart1: echarts.ECharts | null
}>({
  chart1: null
})

// 初始化
const init2 = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(right.value)
  let total = 450
  let option = {
    backgroundColor: 'white',
    title: [
      {
        show: true, // 是否显示标题组件,（true/false）
        text: '博客', // 主标题文本，支持使用\n换行
        textAlign: 'left', //整体水平对齐（包括text和subtext）
        padding: [0, 0, 0, 35], // 标题内边距 写法如[5,10]||[ 5,6, 7, 8] ,
        left: '0', // title组件离容器左侧距离，写法如'5'||'5%'
        top: '8%', // title组件离容器上侧距离
        textStyle: {
          // 标题样式
          color: '#000',
          fontFamily: 'Alibaba PuHuiTi',
          fontSize: 14,
          fontWeight: 600
        }
      },
      {
        show: true, // 是否显示标题组件,（true/false）
        text: '博客:' + total, // 主标题文本，支持使用\n换行
        // textAlign: 'right',    //整体水平对齐（包括text和subtext）
        padding: [0, 20, 0, 0], // 标题内边距 写法如[5,10]||[ 5,6, 7, 8] ,
        right: '0', // title组件离容器左侧距离，写法如'5'||'5%'
        top: '8%', // title组件离容器上侧距离
        textStyle: {
          // 标题样式
          color: '#000',
          fontFamily: 'Alibaba PuHuiTi',
          fontSize: 14,
          fontWeight: 600
        }
      }
    ],

    grid: {
      top: '20%',
      left: '2%',
      right: '2%',
      bottom: '8%',
      containLabel: true
    },

    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(1, 13, 19, 0.5)',
      borderWidth: 1,
      formatter: (params: any) => {
        let str = params[0].name + ' : ' + params[0].value
        return str
      },

      textStyle: {
        color: 'rgba(212, 232, 254, 1)'
        // fontSize: fontChart(0.24),
      },
      extraCssText: 'z-index:2'
    },
    xAxis: {
      data: ['vue', 'react', 'vite', '随笔', 'html', 'js', 'python', 'docker', 'css'],
      axisLine: {
        show: true,
        lineStyle: {
          color: '#eeeeee'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#393939',
        fontSize: 12
        // rotate: "10"
      }
    },
    yAxis: [
      {
        type: 'value',
        // name: "企业概览",
        // nameTextStyle: {
        //   color: "#000",
        //   fontFamily: "Alibaba PuHuiTi",
        //   fontSize: 14,
        //   fontWeight: 600,
        //   // padding: [0, 0, 0, 35]
        // },
        // nameGap: 30,  // 表现为上下位置

        axisLine: {
          show: true,
          lineStyle: {
            color: '#eeeeee'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#393939',
          fontSize: 14
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#eeeeee'
          }
        }
      }
    ],
    series: [
      {
        // name: '采购项目提报',
        type: 'bar',
        barWidth: 20,
        zlevel: 2,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#01B1FF'
              },
              {
                offset: 1,
                color: '#033BFF'
              }
            ],
            false
          )
        },
        label: {
          show: true,
          fontSize: 13,
          color: '#14B6F3',
          position: 'top'
        },
        data: [90, 70, 98, 97, 96, 70, 90, 70, 98]
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
  return myChart
}

// resize
const listener = () => {
  chartObj.chart1?.resize()
}

// 挂载
onMounted(() => {
  chartObj.chart1 = init2()
  window.addEventListener('resize', listener)
})
onUnmounted(() => {
  chartObj.chart1 = null
  window.removeEventListener('resize', listener)
})
onActivated(() => {
  listener()
})
</script>

<style lang="less" scoped></style>
